<style>
body {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  background: white;
}

div:first-child {
  margin-top: 0px;
}

div {
  cursor: pointer;
  text-align: center;
  padding: 1px 3px;
  font-family: sans-serif;
  font-size: 0.8em;
  width: 100px;
  margin-top: 1px;
  background: #cccccc;
}
div:hover {
  background: #ffccff;
}
#red {
  border: 1px solid red;
  color: red;
}
#blue {
  border: 1px solid blue;
  color: blue;
}
#green {
  border: 1px solid green;
  color: green;
}
#yellow {
  border: 1px solid yellow;
  color: yellow;
}
</style>


<script>
function click(color){
  if(color.id=="#FF0000")
  {
  chrome.tabs.executeScript(null, {file: "color.js"});
	  }
  else if(color.id=="blue")
	{
	chrome.tabs.executeScript(null, {file: "color1.js"});
	  }
	  else if(color.id=="green")
	{
	chrome.tabs.executeScript(null, {file: "color2.js"});
	  }
	  else if(color.id=="yellow")
	{
	chrome.tabs.executeScript(null, {file: "color3.js"});
	  }
	  
  window.close();
}
</script>
<div onclick="click(this)" id= "#FF0000">red</div>
<div onclick="click(this)" id="blue">blue</div>
<div onclick="click(this)" id="green">green</div>
<div onclick="click(this)" id="yellow">yellow</div>